import Nprogress from 'nprogress' // 加载滚动条
import 'nprogress/nprogress.css' // 加载滚动条样式
import '~/styles/loading.scss'
//小球配置
Nprogress.configure({
  showSpinner: false,
  easing: 'ease',
  speed: 500,
  trickleSpeed: 200,
})
//全局滚动条
export const useNprogressLoading = () => {
  const start = () => {
    Nprogress.start()
  }
  const done = () => {
    Nprogress.done()
  }
  return { start, done }
}

export const useFullLoading = () => {
  const startLoading = (title = 'loading...') => {
    const bodys: Element = document.body
    const div = <HTMLElement>document.createElement('div')
    div.setAttribute('class', 'k-loading')
    const htmls = `
			<div class="k-loading-box">
            <div class="looping-rhombuses-spinner">
            <div class="rhombus"></div>
            <div class="rhombus"></div>
            <div class="rhombus"></div>
          </div>
      </div>
        <h1 class='k-loading-box-title'>${title}</h1>
			</div>
		`
    window.nextLoading = true
    div.innerHTML = htmls
    bodys.insertBefore(div, bodys.childNodes[0])
  }
  const endLoading = (timer = 0) => {
    nextTick(() => {
      setTimeout(() => {
        window.nextLoading = false
        const el = <HTMLElement>document.querySelector('.k-loading')
        el?.parentNode?.removeChild(el)
      }, timer)
    })
  }
  return {
    startLoading,
    endLoading,
  }
}
